JavaScript Module Federation Runtime API: Dinamik Modullarni Boshqarish

            __webpack_require__.federate.init({
  react: {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(React)
    },
    version: '17.0.2',
  },
  'react-dom': {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(ReactDOM)
    },
    version: '17.0.2',
  }
});

            

              
                Copy
              
            
          

            async function loadModule(remoteName, moduleName) {
  try {
    const container = await __webpack_require__.federate.loadRemoteModule(
      `remoteApp@${remoteName}`,  // remoteName {remoteName}@{url} formatida ekanligiga ishonch hosil qiling
      'default'
    );
    const Module = container.get(moduleName);
    return Module;
  } catch (error) {
    console.error(`Failed to load module ${moduleName} from remote ${remoteName}:`, error);
    return null;
  }
}

// Foydalanish:
loadModule('remoteApp', './Button')
  .then(Button => {
    if (Button) {
      // Button komponentidan foydalanish
      ReactDOM.render(, document.getElementById('root'));
    }
  });

            

              
                Copy
              
            

Tushuntirish:

• Ushbu misolda masofaviy ilovadan modul yuklaydigan asinxron `loadModule` funksiyasi aniqlangan.
• `__webpack_require__.federate.loadRemoteModule` masofaviy kirish nuqtasining URL manzili va ko'lam nomi ('default') bilan chaqiriladi. Masofaviy kirish nuqtasi odatda Webpack tomonidan yaratilgan `remoteEntry.js` fayliga ishora qiluvchi URL'dir.
• `container.get(moduleName)` funksiyasi modulni masofaviy konteynerdan oladi.
• Keyin yuklangan modul xost ilovasida komponentni render qilish uchun ishlatiladi.

3. `__webpack_require__.federate.shareScopeMap`

Ushbu xususiyat umumiy ko'lam xaritasiga (shared scope map) kirish imkonini beradi. Umumiy ko'lam xaritasi umumiy bog'liqliklar haqidagi ma'lumotlarni saqlaydigan ma'lumotlar tuzilmasidir. U ish vaqtida umumiy ko'lamni tekshirish va o'zgartirish imkonini beradi.

Misol:

            console.log(__webpack_require__.federate.shareScopeMap);

            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol shunchaki umumiy ko'lam xaritasini konsolga chiqaradi. Siz buni umumiy bog'liqliklarni va ularning versiyalarini tekshirish uchun ishlatishingiz mumkin.

4. `__webpack_require__.federate.DYNAMIC_REMOTE` (Ramz)

Ushbu ramz umumiy ko'lam konfiguratsiyasida bog'liqlik masofaviy manbadan dinamik ravishda yuklanishi kerakligini ko'rsatish uchun kalit sifatida ishlatiladi.

Misol: (Yuqoridagi `init` misoliga qarang)

Runtime API'ning Amaliy Qo'llanilishi

Module Federation Runtime API turli xil dinamik modul boshqarish senariylariga imkon beradi:

1. Dinamik Funksiyalarni Yuklash

Tasavvur qiling, katta elektron tijorat platformasida turli xil funksiyalar (masalan, mahsulot tavsiyalari, mijozlar sharhlari, shaxsiylashtirilgan takliflar) alohida jamoalar tomonidan ishlab chiqilgan. Module Federation yordamida har bir funksiyani mustaqil mikrofrontend sifatida joylashtirish mumkin. Runtime API bu funksiyalarni foydalanuvchi rollari, A/B test natijalari yoki geografik joylashuvga qarab dinamik ravishda yuklash uchun ishlatilishi mumkin.

Misol:

            async function loadFeature(featureName) {
  if (userHasAccess(featureName)) {
    try {
      const Feature = await loadModule(`feature-${featureName}`, './FeatureComponent');
      if (Feature) {
        ReactDOM.render(, document.getElementById('feature-container'));
      }
    } catch (error) {
      console.error(`Failed to load feature ${featureName}:`, error);
    }
  } else {
    // Foydalanuvchida ruxsat yo'qligini ko'rsatuvchi xabar
    ReactDOM.render(
Access denied
, document.getElementById('feature-container'));
  }
}

// Foydalanuvchi ruxsatiga qarab funksiyani yuklash
loadFeature('product-recommendations');

            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol foydalanuvchi ruxsat huquqlariga asoslanib funksiyani dinamik ravishda yuklaydigan `loadFeature` funksiyasini aniqlaydi.
• `userHasAccess` funksiyasi foydalanuvchida funksiyaga kirish uchun zarur ruxsatlar mavjudligini tekshiradi.
• Agar foydalanuvchida ruxsat bo'lsa, `loadModule` funksiyasi tegishli masofaviy ilovadan funksiyani yuklash uchun ishlatiladi.
• Yuklangan funksiya keyin `feature-container` elementida render qilinadi.

2. Plagin Arxitekturasi

Runtime API plagin arxitekturalarini yaratish uchun juda mos keladi. Asosiy ilova uchinchi tomon ishlab chiquvchilari tomonidan ishlab chiqilgan plaginlarni yuklash va ishga tushirish uchun freymvorkni taqdim etishi mumkin. Bu asosiy kod bazasini o'zgartirmasdan ilovaning funksionalligini kengaytirishga imkon beradi. VS Code yoki Sketch kabi ilovalarni o'ylang, ularda plaginlar maxsus funksionalliklarni taqdim etadi.

Misol:

            async function loadPlugin(pluginName) {
  try {
    const Plugin = await loadModule(`plugin-${pluginName}`, './PluginComponent');
    if (Plugin) {
      // Plaginni asosiy ilova bilan ro'yxatdan o'tkazish
      coreApplication.registerPlugin(pluginName, Plugin);
    }
  } catch (error) {
    console.error(`Failed to load plugin ${pluginName}:`, error);
  }
}

// Plaginni yuklash
loadPlugin('my-awesome-plugin');

            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol plaginni dinamik ravishda yuklaydigan `loadPlugin` funksiyasini aniqlaydi.
• `loadModule` funksiyasi plaginni tegishli masofaviy ilovadan yuklash uchun ishlatiladi.
• Yuklangan plagin keyin `coreApplication.registerPlugin` funksiyasi yordamida asosiy ilova bilan ro'yxatdan o'tkaziladi.

3. A/B Testlash va Tajribalar

Module Federation A/B testlash uchun turli foydalanuvchi guruhlariga funksiyaning turli versiyalarini dinamik ravishda taqdim etish uchun ishlatilishi mumkin. Runtime API tajriba konfiguratsiyalariga asoslanib modulning qaysi versiyasi yuklanishini nazorat qilish imkonini beradi.

Misol:

            async function loadVersionedModule(moduleName, version) {
  let remoteName = `module-${moduleName}-v${version}`;
  try {
    const Module = await loadModule(remoteName, './ModuleComponent');
    return Module; 
  } catch (error) {
    console.error(`Failed to load module ${moduleName} version ${version}:`, error);
    return null;
  }
}

async function renderModule(moduleName) {
  let version = getExperimentVersion(moduleName); // Versiyani A/B testiga qarab aniqlash
  const Module = await loadVersionedModule(moduleName, version);
  if (Module) {
    ReactDOM.render(, document.getElementById('module-container'));
  } else {
    // Fallback yoki xatolikni qayta ishlash
    ReactDOM.render(
Error loading module
, document.getElementById('module-container'));
  }
}

renderModule('my-module');

            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol A/B testiga asoslanib modulning turli versiyalarini qanday yuklashni ko'rsatadi.
• `getExperimentVersion` funksiyasi foydalanuvchining A/B testidagi guruhiga qarab modulning qaysi versiyasi yuklanishi kerakligini aniqlaydi.
• `loadVersionedModule` funksiyasi keyin modulning mos versiyasini yuklaydi.

4. Ko'p Ijarali (Multi-Tenant) Ilovalar

Ko'p ijarali ilovalarda turli ijarachilar (tenants) turli xil sozlamalar yoki funksiyalarni talab qilishi mumkin. Module Federation sizga Runtime API yordamida ijarachiga xos modullarni dinamik ravishda yuklash imkonini beradi. Har bir ijarachi o'ziga moslashtirilgan modullarni taqdim etadigan o'z masofaviy ilovalar to'plamiga ega bo'lishi mumkin.

Misol:

            async function loadTenantModule(tenantId, moduleName) {
  try {
    const Module = await loadModule(`tenant-${tenantId}`, `./${moduleName}`);
    return Module;
  } catch (error) {
    console.error(`Failed to load module ${moduleName} for tenant ${tenantId}:`, error);
    return null;
  }
}

async function renderTenantComponent(tenantId, moduleName, props) {
  const Module = await loadTenantModule(tenantId, moduleName);
  if (Module) {
    ReactDOM.render(, document.getElementById('tenant-component-container'));
  } else {
    ReactDOM.render(
Component not found for this tenant.
, document.getElementById('tenant-component-container'));
  }
}

// Foydalanish:
renderTenantComponent('acme-corp', 'Header', { logoUrl: 'acme-logo.png' });

            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol ijarachiga xos modullarni qanday yuklashni ko'rsatadi.
• `loadTenantModule` funksiyasi ijarachi ID'siga xos masofaviy ilovadan modulni yuklaydi.
• `renderTenantComponent` funksiyasi keyin ijarachiga xos komponentni render qiladi.

E'tiborga Olinadigan Jihatlar va Eng Yaxshi Amaliyotlar

• Versiyalarni Boshqarish: Ziddiyatlarni oldini olish va moslikni ta'minlash uchun umumiy bog'liqliklar versiyalarini diqqat bilan boshqaring. Semantik versiyalashdan foydalaning va versiyalarni qotirish (pinning) yoki bog'liqliklarni qulflash kabi vositalarni ko'rib chiqing.
• Xavfsizlik: Ilovangizga zararli kod yuklanishini oldini olish uchun masofaviy modullarning yaxlitligini tekshiring. Kod imzolash yoki nazorat summasini tekshirishdan foydalanishni ko'rib chiqing. Shuningdek, siz yuklayotgan masofaviy ilovalarning URL manzillariga juda ehtiyot bo'ling; manbaga ishonchingiz komil bo'lsin.
• Xatoliklarni Qayta Ishlash: Masofaviy modullar yuklanmagan hollarni chiroyli tarzda hal qilish uchun mustahkam xatoliklarni qayta ishlash tizimini joriy qiling. Foydalanuvchiga ma'lumot beruvchi xato xabarlarini taqdim eting va zaxira mexanizmlarini ko'rib chiqing.
• Unumdorlik: Kechikishni minimallashtirish va foydalanuvchi tajribasini yaxshilash uchun masofaviy modullarni yuklashni optimallashtiring. Kodni bo'lish (code splitting), kechiktirilgan yuklash (lazy loading) va keshlash kabi usullardan foydalaning.
• Umumiy Ko'lamni Ishga Tushirish: Har qanday masofaviy modulni yuklashdan oldin umumiy ko'lam to'g'ri ishga tushirilganligiga ishonch hosil qiling. Bu bog'liqliklarni ulashish va takrorlanishni oldini olish uchun juda muhimdir.
• Monitoring va Kuzatuvchanlik: Module Federation tizimingizning unumdorligi va sog'lig'ini kuzatish uchun monitoring va logging joriy qiling. Bu sizga muammolarni tezda aniqlash va hal qilishda yordam beradi.
• Tranzitiv Bog'liqliklar: Tranzitiv bog'liqliklarning ta'sirini diqqat bilan ko'rib chiqing. Qaysi bog'liqliklar ulashilayotganini va ular umumiy ilova hajmi va unumdorligiga qanday ta'sir qilishi mumkinligini tushuning.
• Bog'liqlik Ziddiyatlari: Turli modullar o'rtasida bog'liqlik ziddiyatlari yuzaga kelishi mumkinligidan xabardor bo'ling. Ushbu ziddiyatlarni boshqarish uchun `peerDependencies` va `externals` kabi vositalardan foydalaning.

Ilg'or Texnikalar

1. Dinamik Masofaviy Konteynerlar

Webpack konfiguratsiyangizda masofaviy manbalarni oldindan belgilash o'rniga, siz ish vaqtida serverdan yoki konfiguratsiya faylidan masofaviy URL manzillarini dinamik ravishda olishingiz mumkin. Bu sizning xost ilovangizni qayta joylashtirmasdan masofaviy modullaringizning joylashuvini o'zgartirish imkonini beradi.

            // Serverdan masofaviy konfiguratsiyani olish
async function getRemoteConfig() {
  const response = await fetch('/remote-config.json');
  const config = await response.json();
  return config;
}

// Masofaviy manbalarni dinamik ro'yxatdan o'tkazish
async function registerRemotes() {
  const remoteConfig = await getRemoteConfig();
  for (const remote of remoteConfig.remotes) {
    __webpack_require__.federate.addRemote(remote.name, remote.url);
  }
}

// Masofaviy manbalarni ro'yxatdan o'tkazgandan so'ng modullarni yuklash
registerRemotes().then(() => {
  loadModule('dynamic-remote', './MyComponent').then(MyComponent => {
    // ...
  });
});

            

              
                Copy
              
            
          

2. Maxsus Modul Yuklovchilar

Murakkabroq senariylar uchun siz ma'lum turdagi modullarni boshqaradigan yoki yuklash jarayonida maxsus mantiqni bajaradigan maxsus modul yuklovchilarini yaratishingiz mumkin. Bu sizga modul yuklash jarayonini o'z ehtiyojlaringizga moslashtirish imkonini beradi.

3. Server Tomonida Renderlash (SSR) va Module Federation

Garchi murakkabroq bo'lsa-da, Module Federation'ni server tomonida renderlash bilan ishlatish mumkin. Bu serverda masofaviy modullarni yuklash va ularni HTML'ga renderlashni o'z ichiga oladi. Bu sizning ilovangizning dastlabki yuklanish vaqtini yaxshilashi va SEO'ni yaxshilashi mumkin.

Xulosa

JavaScript Module Federation Runtime API masofaviy modullarni dinamik ravishda boshqarish uchun kuchli vositalarni taqdim etadi. Ushbu funksiyalarni tushunib va ulardan foydalanib, siz yanada moslashuvchan, kengaytiriladigan va qo'llab-quvvatlanadigan ilovalar yaratishingiz mumkin. Module Federation mustaqil ishlab chiqish va joylashtirishni rag'batlantiradi, bu esa tezroq reliz sikllarini va katta chaqqonlikni ta'minlaydi. Texnologiya rivojlanib borar ekan, biz yanada innovatsion foydalanish holatlari paydo bo'lishini kutishimiz mumkin, bu esa Module Federation'ni zamonaviy veb-arxitekturalarning asosiy omili sifatida yanada mustahkamlaydi.

Mustahkam va ishonchli tizimni ta'minlash uchun Module Federation'ning xavfsizlik, unumdorlik va versiyalarni boshqarish jihatlarini diqqat bilan ko'rib chiqishni unutmang. Ushbu eng yaxshi amaliyotlarni qabul qilib, siz dinamik modul boshqarishning to'liq salohiyatini ochishingiz va global auditoriya uchun haqiqatan ham modulli va kengaytiriladigan ilovalar yaratishingiz mumkin.